<script>
import VueCountTo from 'vue-count-to';
export default {
    name: 'CountTo',
    inheritAttrs: false,
    props: ['value', 'suffix', 'isUseEasing'],
    components: {
        VueCountTo,
    },
    data() {
        return {
            startVal: 0,
            endVal: 0,
        }
    },
    computed: {
        useEasing(){
            return this.isUseEasing == false ? this.isUseEasing :  true
        }
    },
    watch: {
        value: {
            immediate: true,
            handler(newVal, oldVal) {
                if(!this.useEasing){
                     this.startVal = Number(newVal)
                     this.endVal = Number(newVal)
                     return
                }
                newVal = Number(newVal);
                oldVal = Number(oldVal);
                this.startVal = (isNaN(oldVal) || !oldVal) ? 0 : oldVal
                this.endVal = (isNaN(newVal) || !newVal) ? 0 : newVal
            },
        },
    },
    render(h) {
        return this.endVal && <VueCountTo useEasing={this.useEasing} suffix={this.suffix} {...{ props: this.$attrs }} decimals={2} duration={1000} {...{ on: this.$listeners }} start-val={this.startVal} end-val={this.endVal} />
    }
}
</script>